<template>
	<view class="zxc_centent">
		<view style="height:80upx">
		<view class="dc">
			 <u-tabs :list="tabs" @click="click" :current="current" :scrollable="false" lineColor="#07c160"></u-tabs>
		</view>
		</view>
		<!-- end -->
		
		<view class="list">
			
			<view class="list_tp">
				<view class="list_tp_left">
					投诉时间：2022-08-12  12:12
				</view>
				<view class="list_tp_right">
					<!-- 0处理中 1已处理 2已关闭 -->
					<text v-if="status == 0">处理中</text>
					<text v-if="status == 1">已处理</text>
					<text v-if="status == 2">已关闭</text>
				</view>
			</view>
			
			<view class="list_text">投诉订单：20221068888866</view>
			<view class="list_text tab_lei">
				投诉类型：
			<text class="tab_sm">与期望不符</text>
			<text class="tab_sm">态度差</text>
			<text class="tab_sm">乱收费</text>
			</view>
			<view class="list_text">投诉内容：软件非常卡软件非常卡软件非常卡软件非常卡软件非常卡软件非常卡软件非常卡</view>
			<view class="tou_img_view">
				<image src="/static/images/logo.png" class="tou_img"></image>
				<image src="/static/images/logo.png" class="tou_img"></image>
				<image src="/static/images/logo.png" class="tou_img"></image>
			</view>
			<view class="hui_text" v-if="status ==1">回复：您好，您的意见我们已收到，已反馈给总部技术部门。祝您生活愉快！</view>
			
			<view class="list_bt">
				<!-- <view class="list_btn" v-if="status == 1 || status == 2">删除投诉</view> -->
				<view class="list_btn" v-if="status == 0">取消投诉</view>
			</view>
			
		</view>
		<!-- end -->
		
	</view>
</template>

<script>
	export default {
		data (){
			return {
				tabs: [{
				                    name: '全部',
				                }, {
				                    name: '处理中',
				                }, {
				                    name: '已处理'
				                }, {
				                    name: '已关闭'
				                }],
				current:0,
				status:1,  //0处理中 1已处理 2已关闭
				}
				},
				methods:{
					click (item){
						console.log(item)
					}
				},
		}
</script>

<style>
	.dc{
	background-color: #fff;
	position: fixed;
	left:0;
	top:80upx;
	/* #ifdef APP-PLUS */
	top:0;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	top:0;
	/* #endif */
	width: 100%;
	height:100upx;
	z-index: 99;
	}
	.list{
		width:86%;
		padding:30upx;
		margin:20upx auto 0;
		border-radius: 10upx;
		background-color: #fff;
		font-size:28upx;
		color:#999;
	}
	.list_tp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color:#4f4f4f;
		margin-bottom:20upx;
		padding-bottom:30upx;
		border-bottom:2upx solid #ededed;
	}
	.list_text{
		margin-top:10upx;
	}
	.tab_lei{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tab_sm{
		background-color: #f5f5f5;
		padding:10upx 20upx;
		color:#000;
		margin-right:20upx;
		font-size: 26upx;
	}
	.tou_img_view{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin:20upx 0;
	}
	.tou_img{
		width:150upx;
		height:150upx;
		border-radius: 10upx;
		margin-right:20upx;
	}
	.hui_text{
		color:#ff766a;
		margin-top:20upx;
	}
	.list_bt{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-top:20upx;
		border-top:2upx solid #ededed;
		margin-top:20upx;
	}
	.list_btn{
		font-size:24upx;
		border:2upx solid #999;
		border-radius: 100upx;
		padding:10upx 20upx;
		color:#333;
		margin-left:20upx;
	}
</style>